<template>
  <div class="layout">
    <el-container class="container">
      <el-aside width="200px" class="left-aside">
        <el-row>
          <el-col :span="24">
            <div class="title-container">
              <h1>后台管理系统</h1>
            </div>
            <div class="menu-panel" v-if="this.userIdentify === '超级管理员'">
              <ul>
                <li v-for="(menu, index) in superManagerMenuList" :key="index">
                  <router-link :to="menu.path" 
                               :class="['menu-title',activePath==menu.path?'active':'']">{{ menu.title }}</router-link>
                </li>
              </ul>
            </div>
            <div class="menu-panel" v-if="this.userIdentify === '普通管理员'">
              <ul>
                <li v-for="(menu, index) in managerMenuList" :key="index">
                  <router-link :to="menu.path" 
                               :class="['menu-title',activePath==menu.path?'active':'']">{{ menu.title }}</router-link>
                </li>
              </ul>
            </div>
            <div class="menu-panel" v-if="this.userIdentify === '普通用户'">
              <ul>
                <li v-for="(menu, index) in userMenuList" :key="index">
                  <router-link :to="menu.path" 
                               :class="['menu-title',activePath==menu.path?'active':'']">{{ menu.title }}</router-link>
                </li>
              </ul>
            </div>
          </el-col>
        </el-row>
      </el-aside>
      <el-main class="right-main">
        <router-view />
      </el-main>
    </el-container>
  </div>
</template>

<script>
import { getCurrentInstance,watch } from 'vue'
import { useRouter,useRoute } from 'vue-router';
export default {
  data(){
    return {
      activePath: "/admin/dashboard",
      router: useRouter(),
      route: useRoute(),
      proxy: getCurrentInstance().proxy,
      userIdentify:'',
      superManagerMenuList:[
      {
        title:"仪表盘",
        path:"/admin/dashboard",
      },
      {
        title:"管理员管理",
        path:"/admin/managers",
      },
      {
        title:"文章管理",
        path:"/admin/articles",
      },
      {
        title:"评论管理",
        path:"/admin/comments",
      },
      {
        title:"关注管理",
        path:"/admin/follow",
      },
      {
        title:"个人资料",
        path:"/admin/profile",
      },{
        title:"标签管理",
        path:"/admin/tags",
      },
      {
        title:"用户管理",
        path:"/admin/users",
      },
      {
        title:"公告管理",
        path:"/admin/notices",
      },
      {
        title:"返回首页",
        path:"/"
      }
      ],
      managerMenuList:[
      {
        title:"仪表盘",
        path:"/admin/dashboard",
      },
      {
        title:"文章管理",
        path:"/admin/articles",
      },
      {
        title:"评论管理",
        path:"/admin/comments",
      },
      {
        title:"关注管理",
        path:"/admin/follow",
      },
      {
        title:"个人资料",
        path:"/admin/profile",
      },{
        title:"标签管理",
        path:"/admin/tags",
      },
      {
        title:"用户管理",
        path:"/admin/users",
      },
      {
        title:"公告管理",
        path:"/admin/notices",
      },
      {
        title:"返回首页",
        path:"/"
      }
      ],
      userMenuList:[
      {
        title:"仪表盘",
        path:"/admin/user/dashboard",
      },
      {
        title:"文章管理",
        path:"/admin/user/articles",
      },
      {
        title:"评论管理",
        path:"/admin/user/comments",
      },
      {
        title:"关注管理",
        path:"/admin/follow",
      },
      {
        title:"个人资料",
        path:"/admin/profile",
      },
      {
        title:"返回首页",
        path:"/"
      }
      ],
    };
  },
  watch: {
    $route: {
      handler(newVal, oldVal){
        this.activePath = newVal.path;
      },
      immediate:true,
      deep:true
    }
  },
  created(){
    this.route = this.$route;
    var userInfo = eval("("+localStorage.userInfo+")");
    console.log(typeof(useridentity))
    console.log(typeof(localStorage.userInfo))
    console.log(userInfo.loginUserInfo.identity)
    this.userIdentify =  userInfo.loginUserInfo.identity
    console.log(this.userIdentify)
  }
};
</script>

<style scoped>
.layout {
  /* background-color: #5D6D7E; */
  width: 100%;
  .container{
    height: 100vh;
    .left-aside {
      padding: 15px;
      width: 250px;
      background: #53565c;
      .title-container {
        text-align: center;
        color: #ECF0F1;
        margin-bottom: 20px;
        font-size: 25px;
        font-weight: bold;
      }
      .menu-panel {
        active-text-color: #ffd04b;
        ul,
        li {
          padding: 0px;
          margin: 0px;
          list-style: none;
        }

        .menu-title {
          display: flex;
          flex: 1;
          font-size: 25px;
          color: #D0D3D4;
          line-height: 40px;
          cursor: pointer;
          text-decoration: none;
        }
        .active{
          color: #ffd04b;
        }
        .menu-title:hover {
          background: #B3B6B7;
        }
      }
    }
    .right-main {
      position: relative;
      background: #dfdcd5;

    }
  }
}
</style>